<template>
  <div class="film-config">
    <a-form ref="whiteListRef" :model="ipState" :rules="configRules" class="film-config-top">
      <div class="film-config-top-tip">
        <info-circle-outlined class="film-config-top-tip-icon" />
        <span class="film-config-top-tip-title">说明：</span>
        <span class="film-config-top-tip-text">只有白名单IP地址才能访问，未设置时，所有IP均可访问。</span>
      </div>
      <a-form-item label="IP地址" name="ip_list" class="form-item">
        <a-textarea
          v-model:value="ipState.ip_list"
          :maxlength="1000"
          placeholder="请输入IP地址"
          :rows="5"
          class="w-460 h-230"
        />
        <div class="tip-text">一行一个IP地址</div>
      </a-form-item>
    </a-form>
  </div>
  <div class="film-config-top-btn">
    <a-button type="primary" :loading="loading" @click="saveWhiteListPage">保存当前页面</a-button>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ipState, configRules } from './state'
import apis from '@/apis'
import { message } from 'ant-design-vue'
const {
  system: { get_white_list, set_white_list }
} = apis
const whiteListRef = ref()
const loading = ref(false)
const getWhiteList = () => {
  get_white_list().then((res: any) => {
    console.log(res, '获取采集问文章配置')
    ipState.ip_list = res.ip_list.join('\n')
  })
}
const saveWhiteListPage = () => {
  whiteListRef.value
    .validate()
    .then(() => {
      const ipList = ipState.ip_list.split('\n')
      loading.value = true
      set_white_list({ ip_list: ipList }).then((res: any) => {
        loading.value = false
        message.success('白名单设置成功')
      })
    })
    .catch(() => {
      loading.value = false
    })
}
onMounted(() => {
  getWhiteList()
})
</script>

<style lang="less" scoped>
.film-config {
  margin-top: 24px;
  &-top {
    border-bottom: 1px solid #f0f0f0;

    &-tip {
      width: 100%;
      min-height: 48px;
      background: #fffbe4;
      border: 0.5px solid rgba(255, 169, 0, 1);
      border-radius: 3px;
      font-size: 14px;
      padding: 14px 16px;
      box-sizing: border-box;
      margin-bottom: 24px;

      &-icon {
        color: #ffa900;
      }
      &-title {
        font-size: 14px;
        color: #262626;
        font-weight: 500;
        margin-left: 8px;
      }
      &-text {
        font-size: 14px;
        color: #595959;
        font-weight: 400;
        margin-left: 8px;
      }
    }
    &-btn {
      border-top: 1px solid #e8e8e8;
      padding-top: 24px;
    }
  }
  .form-item {
    :deep(.ant-form-item-label > label::after) {
      content: '';
      margin-right: 15px;
    }
    .tip-text {
      margin-top: 8px;
      font-size: 12px;
      color: #bfbfbf;
      letter-spacing: 0;
    }
    .m-l-53 {
      margin-left: 53px;
    }

    .w-460 {
      width: 460px;
    }
    .h-230 {
      height: 230px;
    }
    .default-btn {
      width: 60px;
      height: 28px;
      font-size: 14px;
      color: #00a870;
      background: rgba(0, 168, 112, 0.08);
      border-radius: 2px;
      padding: 3px 9px;
    }
  }
}
</style>
